<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>致·韩江月</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      background: #000;
      color: #fff;
      font-family: "KaiTi", "Microsoft YaHei", sans-serif;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    #myCanvas {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 0;
      background: url("/web/background.jpg") no-repeat center center;
      background-size: cover;
    }

    .moon {
      position: absolute;
      top: 10%;
      right: 10%;
      width: 120px;
      height: 120px;
      background: radial-gradient(circle, #fff 40%, #ccc);
      border-radius: 50%;
      box-shadow: 0 0 40px #fff;
      z-index: 1;
    }

    .swallow {
      position: absolute;
      width: 60px;
      z-index: 1;
      transition: left 0.1s, top 0.1s;
    }

    .container {
      position: relative;
      z-index: 2;
      max-width: 800px;
      background-color: rgba(0,0,0,0.6);
      border-radius: 16px;
      backdrop-filter: blur(4px);
      padding: 40px;
      overflow-y: auto;
      height: 50vh;
      margin-bottom: 80px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }

    h1 {
      font-size: 36px;
      margin-bottom: 20px;
      font-family: "KaiTi", sans-serif;
    }

    .letter {
      white-space: pre-wrap;
      font-size: 22px;
      line-height: 2;
      display: inline-block;
      max-width: 100%;
      color: #fff;
    }

    .footer {
      text-align: right;
      margin-top: 30px;
      font-size: 16px;
      font-style: italic;
      display: none;
      color: #fff;
    }

    #timer {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.6);
      padding: 10px 20px;
      border-radius: 20px;
      font-size: 16px;
      color: #ccc;
      z-index: 2;
    }

    #distance {
      position: fixed;
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.7);
      padding: 10px 20px;
      border-radius: 20px;
      font-size: 16px;
      color: #fff;
      z-index: 2;
    }

    .star {
      position: absolute;
      width: 8px;
      height: 8px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 10px #fff;
      animation: fadeStar 1.5s linear forwards;
      pointer-events: none;
      z-index: 2;
    }

    @keyframes fadeStar {
      to {
        transform: scale(0);
        opacity: 0;
      }
    }

    #visitorNotifyForm {
      display: none;
    }

    .long-letter {
      font-size: 18px;
      line-height: 2;
      margin-top: 20px;
      color: #fff;
      text-align: center;
      white-space: pre-wrap;
      word-break: break-word;
      max-width: 80%;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>
  <div class="moon"></div>
  <img class="swallow" id="swallow" src="/web/小燕子.png" alt="小燕子">

  <div class="container">
    <h1>亲爱的韩江月，我的小燕子：</h1>
    <div class="long-letter" id="letter"> </div>
    <div class="footer" id="footer">
      永远爱你的<br>
      刘启博<br>
      2025年4月17日于月光下
    </div>
  </div>

  <div id="timer"></div>
  <div id="distance"></div>

  <!-- 添加音频元素 -->
  <audio id="audio" src="/web/Yoohsic Roomz - Eutopia.mp3"></audio>

  <script>
    // 音频播放函数
    function playSound(){
      var audio = document.getElementById("audio");
      if(audio.paused) {
        audio.play();  // 播放音频
      } else {
        audio.pause();  // 暂停音频
      }
    }

    // 点击事件触发播放音频
    window.onclick = function() {
      playSound();
    };

    const text = `（小燕子，点一点月亮好吗？它亮起来的时候，就是我此刻想你的样子）
      我知道，我又让你失望了。我嘴笨，像块木头，话到嘴边总怕说错，结果越怕越错，最后反而让你更难过。其实每次看你伤心，我心里都像被针扎一样，恨不得抽自己两下——怎么连最在乎的人都哄不好？但今天这些话，我一个字一个字地写，不修饰，不讨好，只想让你知道——我真的不想失去你。

      我们结发为夫妻的那天，我就在心里发誓，这辈子一定好好对你。可我还是搞砸了。我不是一个聪明的人，有时候连哄你开心的话都说不利索，只会用最笨的方式对你好。

      所以，我做了这个网站。代码是我熬夜一行行敲的，动画是我翻教程一点点学的，背景音乐，是你向我推荐了很久的那首歌，我花钱买了下了，用了最高的音质。我不懂浪漫，但我想用我最擅长的方式告诉你——只要互联网还存在，只要人类的机械造物还在运转，只要我还活着，这个网站就会一直更新下去。

      这或许比不上沉甸甸的金子，但我想着，要是哪天我惹你生气了，你打开这个页面，至少能看见：有个傻子，把你爱的东西都藏进了代码里；有个呆子，把“对不起”和“我爱你”写成了永不消失的动画；有个笨丈夫，在用自己的方式说——哪怕到咱们头发全白，你戳一戳屏幕，我依然会像当年那个青涩的毛头小子一样，手足无措却掏心掏肺地爱你。
      
      这网站我会一直更新。等禾禾出嫁了，我就加上她穿婚纱的样子；等咱们搬新家，我就把院子里的芍药做成像素画；等将来……等将来我们都老了，它就是我们看得见摸得着的回忆，像结婚证一样不会褪色。
      小燕子，我知道现在说什么都显得苍白。但如果你愿意，我想用一辈子的时间，把这个网站写成我们最长的情书。
      燕子，再给我一次机会好不好？这次不用一辈子发誓——你看，我已经把一辈子都写成代码，放在你手心里了。`;

    const letterEl = document.getElementById('letter');
    const footerEl = document.getElementById('footer');
    let index = 0;

    function typeWriter() {
      if (index < text.length) {
        letterEl.style.display = 'block';
        letterEl.innerHTML += text.charAt(index);
        index++;
        setTimeout(typeWriter, 40);
      } else {
        footerEl.style.display = 'block';
        sendEmail();
      }
    }

    setTimeout(typeWriter, 1000);

    function sendEmail() {
      const formData = {
        to_email: '3386430646@qq.com',
        subject: '致韩江月的情书',
        message: text,
      };

      emailjs.send('service_mumehfk', 'template_20f2cyd', formData)
        .then(function(response) {
          console.log('邮件发送成功:', response);
        }, function(error) {
          console.error('邮件发送失败:', error);
        });
    }

    const xiAnLat = 34.3416;
    const xiAnLon = 108.9398;

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        const lat = position.coords.latitude;
        const lon = position.coords.longitude;
        const distance = calculateDistance(xiAnLat, xiAnLon, lat, lon);
        document.getElementById('distance').innerHTML = `与你的距离：${distance.toFixed(2)} 公里`;
      }, function(error) {
        document.getElementById('distance').innerHTML = "无法获取距离";
      });
    } else {
      document.getElementById('distance').innerHTML = "浏览器不支持定位";
    }

    function calculateDistance(lat1, lon1, lat2, lon2) {
      const R = 6371;
      const phi1 = lat1 * Math.PI / 180;
      const phi2 = lat2 * Math.PI / 180;
      const deltaPhi = (lat2 - lat1) * Math.PI / 180;
      const deltaLambda = (lon2 - lon1) * Math.PI / 180;

      const a = Math.sin(deltaPhi / 2) * Math.sin(deltaPhi / 2) +
                Math.cos(phi1) * Math.cos(phi2) *
                Math.sin(deltaLambda / 2) * Math.sin(deltaLambda / 2);
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      
      return R * c;
    }

    const swallow = document.getElementById('swallow');
    
    document.body.addEventListener('mousemove', (e) => {
      const mouseX = e.clientX;
      const mouseY = e.clientY;
      swallow.style.left = `${mouseX - swallow.width / 2}px`;
      swallow.style.top = `${mouseY - swallow.height / 2}px`;
    });

    const canvas = document.getElementById("myCanvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const ctx = canvas.getContext("2d");

    window.onresize = function () {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    };

    function Ball() {
      this.x = randomNum(3, canvas.width - 3);
      this.y = randomNum(3, canvas.height - 3);
      this.r = randomNum(2, 5);
      this.color = "#7ec7fd";
      this.speedX = randomNum(-3, 3) * 0.2;
      this.speedY = randomNum(-3, 3) * 0.2;
    }

    Ball.prototype = {
      draw: function () {
        ctx.beginPath();
        ctx.globalAlpha = 1;
        ctx.fillStyle = this.color;
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.fill();
      },
      move: function () {
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.x <= 3 || this.x > canvas.width - 3) this.speedX *= -1;
        if (this.y <= 3 || this.y > canvas.height - 3) this.speedY *= -1;
      }
    };

    const balls = [];
    for (let i = 0; i < 100; i++) balls.push(new Ball());

    let mouseX, mouseY;
    canvas.onmousemove = function (e) {
      mouseX = e.offsetX;
      mouseY = e.offsetY;
    };

    function mouseLine() {
      for (let i = 0; i < balls.length; i++) {
        if (
          Math.sqrt(
            Math.pow(balls[i].x - mouseX, 2) +
            Math.pow(balls[i].y - mouseY, 2)
          ) < 80
        ) {
          ctx.beginPath();
          ctx.moveTo(balls[i].x, balls[i].y);
          ctx.lineTo(mouseX, mouseY);
          ctx.strokeStyle = "white";
          ctx.globalAlpha = 0.8;
          ctx.stroke();
        }
      }
    }

    function drawLine() {
      for (let i = 0; i < balls.length; i++) {
        balls[i].draw();
        balls[i].move();
        for (let j = 0; j < balls.length; j++) {
          if (i != j) {
            if (
              Math.sqrt(
                Math.pow(balls[i].x - balls[j].x, 2) +
                Math.pow(balls[i].y - balls[j].y, 2)
              ) < 80
            ) {
              ctx.beginPath();
              ctx.moveTo(balls[i].x, balls[i].y);
              ctx.lineTo(balls[j].x, balls[j].y);
              ctx.strokeStyle = "white";
              ctx.globalAlpha = 0.2;
              ctx.stroke();
            }
          }
        }
      }
    }

    function main() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      mouseLine();
      drawLine();
      window.requestAnimationFrame(main);
    }

    function randomNum(m, n) {
      return Math.floor(Math.random() * (n - m + 1) + m);
    }

    main();

    function updateTimer() {
      const start = new Date('2024-09-22T00:00:00');
      const now = new Date();
      const diff = now - start;
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
      const minutes = Math.floor((diff / (1000 * 60)) % 60);
      const seconds = Math.floor((diff / 1000) % 60);
      document.getElementById('timer').innerText = `我们已经认识 ${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`;
    }
    setInterval(updateTimer, 1000);
    updateTimer();
  </script>
</body>
</html>
